<template>
	<view class="my-userinfo-contain">
		<view class="top-box">
			<image :src="userinfo.avatarUrl" class="avatar"></image>
			<view class="nickname">
				{{userinfo.nickName}}
			</view>
		</view>
		<view class="panel-box">
			<!-- 第一个面板区域 -->
			<view class="panel-body">
				<view class="panel-item">
					<text>8</text>
					<text>收藏的店铺</text>
				</view>
				<view class="panel-item">
					<text>14</text>
					<text>收藏的商品</text>
				</view>
				<view class="panel-item">
					<text>18</text>
					<text>关注的商品</text>
				</view>
				<view class="panel-item">
					<text>84</text>
					<text>足迹</text>
				</view>
			</view>
			<!-- 第二个面板区域 -->
			<view class="panel-body2">
				<view class="my-order">
					我的订单
				</view>
				<view class="panel-lists">
					<view class="panel-item2">
						<image src="/static/other/paymonery.png" mode=""></image>
						<text>待付款</text>
					</view>
					<view class="panel-item2">
						<image src="/static/other/getgoods.png">
						<text>待收货</text>
					</view>
					<view class="panel-item2">
						<image src="/static/other/backmonery.png" mode=""></image>
						<text>退户/退款</text>
					</view>
					<view class="panel-item2">
						<image src="/static/other/orderlists.png" mode=""></image>
						<text>全部订单</text>
					</view>
				</view>
			</view>
			<!-- 第三个面板区域 -->
			<view class="panel-body3">
				
				<view class="panel-item3">
					<button hover-class='none' type="primary"  open-type="contact" class="contact">联系客服</button>
					
				</view><view class="panel-item3" @click="outlogin">
					<view class="panel-item3-desc back">
						退出登录
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		name:"my-userinfo",
		data() {
			return {
				
			};
		},
		computed:{
			...mapState('m_user',['userinfo'])
			
		},
		methods:{
			...mapMutations('m_user',['updateuserinfo','updataToken','upaddress']),
		async	outlogin(){
			const [err,succ] =  await uni.showModal({
					title:"提示",
					content:"确认退出登录吗？"
				}).catch(err=>err)
				if(succ && succ.confirm ){
					this.updateuserinfo({})
					this.updataToken('')
					this.upaddress({})
				}
			}
		}
	}
</script>

<style>
.my-userinfo-contain{
	width: 100%;
	height: 100%;
	background-color: #F4F4F4;
	position: absolute;
}
.top-box{
	height: 400rpx;
	background-color: #C00000;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.avatar{
	width: 90px;
	height: 90px;
	border-radius: 50%;
	border: 2px solid #FFFFFF;
	box-shadow: 0px 1px 5px black;
}

.nickname{
	color:white;
	font-size: 16px;
	font-weight: 700;
	margin-top: 10px;
}
.panel-box{
	padding: 0 10px;
	font-size: 14px;
	
}
.panel-body{
	display: flex;
	background-color: #ffffff;
	position: relative;
	top: -10px;
	justify-content: space-around;
	border-radius: 5px;
}
.panel-item{
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.panel-body2{
	background-color: #FFFFFF;
}
.panel-body2 .my-order{
	padding: 8px;
	font-weight: 500;
	border-bottom: 1px solid #dddddd;
}
.panel-item2 image{
	width: 35px;
	height: 35px;
}
.panel-lists {
	display: flex;
	justify-content: center;
}
.panel-item2{
	padding: 15px;
	display: flex;
    flex-direction: column;
	justify-content: center;
	align-items: center;
}
.panel-body3{
	margin-top: 10px;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	font-weight: 600;
}
.panel-item3{
	display: flex;
	padding: 8px;
	font-weight: 500;
	justify-content: space-between;
}
.panel-item3 .back{
	font-size: 16px;
	font-weight: 600;
	width: 100%;
	text-align: center;
	padding: 10px 0px;
	color: red;
	background-color: #dddddd;
}
button{
		background-color:#ffffff; //可根据自己的背景颜色自行设置
		border-radius: 0rpx;
		padding:0rpx;
		margin:0rpx;
		display: inline-block;
		line-height: 1;
		font-size: 16px;
		font-weight: 600;
		width: 100%;
		padding: 10px 0px;
		color: #09BB07;
		
}
button::after {
	  border: none;
	  color: #09BB07;
	  
	}

</style>
